<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="lib/angular.js"></script>
	<script type='text/javascript' src='lib/angular-router.js'></script>
	<style>
		.w{
			background: red;
		}
	</style>
</head>
<body>
<div ng-app="main">
	<div>
		<cilcke>
			原来的内容
		</cilcke>
	</div>

	<div class="cilcke">
			我是第二种写法
	</div>
	<div cilcke>
		我是第三种写法
	</div>

	<input ng-model='name'></input>
	<span ng-bind="name" style="background: red"> </span>
</div>
	<script>
	    var arr=[];
		var myapp = angular.module('main',[]);
		myapp.directive('cilcke',function(){
			return{
				restrict:'ACE',
				template : "<h1 ng-click=trag()>自定义指令!{{title}}</h1><h2 ng-transclude ng-show='title'></h2>",
//				templateUrl:'htmls/icon.html',
				transclude:true,
				// replace:true,
				link:function(scope,element){
					scope.title = false;
					arr.push(element);
					scope.trag = function trag(){
						element.css("color",'red');
						scope.title = !scope.title;
					}
				},
			};
		});

	</script>
</body>
</html>